4 - ‘While’ Loops in JavaScript

While we're at it

Great work with for loops! As a reminder,for loop syntax looks like this:

for (var i = start; i < end; i++) {
  // do something
}

The counter variable i starts at "start", and stops looping when it reaches "end."

But what if you didn't know ahead of time when to stop looping? Say, for example, you wanted to keep choosing playing cards from a deck until you get a spade. You don't know how many cards you'll need to choose, so a for loop won't work.

In situations like these where you don't know in advance when to stop looping, we can use a while loop.

var coinFace = Math.floor(Math.random() * 2);
while(coinFace === 0){
    console.log("Heads! Flipping again...");
    var coinFace = Math.floor(Math.random() * 2);
}
console.log("Tails! Done flipping.");
While syntax

The while loop is ideal when you want to use a loop, but you don't know how many times you'll have to execute that loop.

In the example you just saw, the computer was randomly flipping a coin: while the coin came up heads (when coinFaceequalled 0), it would flip again, and it would stop flipping once it got tails (whencoinFace was 1). Since the flip was random, we didn't know ahead of time how many loops we'd need.

The syntax looks like this:

while(condition){
    // Do something!
}

As long as the condition evaluates to true, the loop will continue to run. As soon as it'sfalse, it'll stop. (When you use a number in a condition, as we did earlier, JavaScript understands 1 to mean true and 0 to mean false.)

Since you've already mastered for loops, this simpler syntax should be a breeze for you.

Instructions:
Try it yourself—complete the while loop in the editor so it will print out "I'm learning while loops!". Do this by adding the condition between the parentheses—don't change line 5, or you could get an infinite loop!
var understand = true;
while( understand == true ){
    console.log("I'm learning while loops!");
    understand = false;
}
A fellow of infinite loops

Great work!

We mentioned infinite loops in the previous exercise. If you give a while loop a condition that is true and you don't build in a way for that condition to possibly become false, the loop will go on forever and your program will crash. No good!

To prevent this from happening, you alwaysneed a way to ensure the condition between your while parentheses can change.

You'll see the same code from the last exercise in the editor to the right, only we've taken out the part that changes the loop's condition.

Instructions:

DON'T run the code the way it is—you'll have to reload the window to stop the infinite loop! Instead, change the value ofunderstand to something other than true(such as false) on line 6 so the loop will exit.

understand = false;
while(understand){
    console.log("I'm learning while loops!");
    //Change the value of 'understand' here!
    
}
Brevity is the soul of programming

You may have noticed that when we give a variable the boolean value true, we check that variable directly—we don't bother with===. For instance,

var bool = true;
while(bool){
    //Do something
}

is the same thing as

var bool = true;
while(bool === true){
    //Do something
}

but the first one is faster to type. Get in the habit of typing exactly as much as you need to, and no more!

If you happen to be using numbers, as we did earlier, you could even do:

var myNumber = 1;
while(myNumber) {
    // Do something!
}
Practice makes perfect

Okay. Time for you to create a while loop from scratch!

We've set up a function, loop, for you to write your while loop in, as well as created the empty loop.

Remember to set up the condition you're checking outside the loop—if you do it inthe loop, it will keep resetting and the loop could go on forever!

Instructions:

Write a while loop that logs "I'm looping!" to the console three times. You can do this however you like, but NOT with threeconsole.log calls. Check the Hint if you need help!

//Remember to set your condition outside the loop!
var number = 3
var loop = function(){
    while(number > 0){
        //Your code goes here!
        console.log("I'm looping!");
        number --;
    }
};
loop();
var x = true
var soloLoop = function(){
  //Your code goes here!
  while(x){
      console.log("Looped once!");
      x = false;
  }
};
soloLoop();
Mid-lesson breather

Great work so far! You've learned:

  • What while loops are
  • while loop syntax
  • How to avoid infinite loops

Next up, we'll cover the do/while loop, when to use while and when to use for, and then put it all together in a loop-the-loop review.

When to 'while' and when to 'for'

As we mentioned, for loops are great for doing the same task over and over when you know ahead of time how many times you'll have to repeat the loop. On the other hand, while loops are ideal when you have to loop, but you don't know ahead of time how many times you'll need to loop.

As you saw, however, you can combine awhile loop with a counter variable to do the same kind of work a for loop does. In these cases, it's often a matter of preference.

Instructions:

Write two loops in the editor: one while, one for. No restrictions on this one; just make sure your loops are syntactically correct, and be careful to avoid infinite loops!

var i = 0
var numb = true
while(numb){
    console.log("I'm in a while loop");
    numb = false;
    for (i; i < 5; i++){
        console.log(i);
    }
}
The 'do' / 'while' loop

Sometimes you want to make sure your loop runs at least one time no matter what. When this is the case, you want a modifiedwhile loop called a do/while loop.

This loop says: "Hey! Do this thing one time,then check the condition to see if we should keep looping." After that, it's just like a normal while: the loop will continue so long as the condition being evaluated is true.

var loopCondition = false;
do {
    console.log("I'm gonna stop looping 'cause my condition is " + loopCondition + "!");    
} while (loopCondition);
To learn it, you gotta 'do' it

Your turn! Now that you've seen howdo/while loops work, you can easily write your own. (Check the Hint if you need a syntax refresher!)

Your loop should print a string of your choice to the editor one time. Remember: make sure you give your while condition a way to become false, or it'll loop forever!

Instructions:

Write a do/while loop inside the function we've created for you, getToDaChoppa. The function should log a string of your choice to the console. do it now!

var getToDaChoppa = function(){
    var x = 5;
  // Write your do/while loop here!
  do {
      console.log("Get to the choppa");
      x--;
  } while(x > 0);
};
getToDaChoppa();
// Write your code below!
var i = 5;
var cond = true;
do {
    console.log("Time to countdown from ")
    for(i; i >= 0; i--){
        console.log(i);
    }
} while(i > 0);